<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/zns_style.css">
</head>
<body>
  <div id="playimages" class="play">
      <ul class="big_pic">

          <div class="prev"></div>
          <div class="next"></div>

          <div class="text">加载图片说明...</div>
          <div class="length">计算图片数量...</div>

          <a class="mark_left" href="javascript:;"></a>
          <a class="mark_right" href="javascript:;"></a>

          <div class="bg"></div>
          <li style="z-index: 1"><img src="images3/1.jpg"></li>
          <li><img src="images3/2.jpg"></li>
          <li><img src="images3/3.jpg"></li>
          <li><img src="images3/4.jpg"></li>
          <li><img src="images3/5.jpg"></li>
          <li><img src="images3/6.jpg"></li>
      </ul>
      <div class="small_pic">
          <ul style="width:390px;">
              <li style="filter: alpha(opacity:1);opacity: 1"><img src="images3/1.jpg" /></li>
              <li><img src="images3/2.jpg" /></li>
              <li><img src="images3/3.jpg" /></li>
              <li><img src="images3/4.jpg" /></li>
              <li><img src="images3/5.jpg" /></li>
              <li><img src="images3/6.jpg" /></li>
          </ul>
      </div>
  </div>
  <script type="text/javascript" src="js/util.js"></script>
  <script>

      //左右按钮
      var oDiv = document.getElementById('playimages');
      var oBtnPrev = getClass(oDiv,'prev')[0];
      var oBtnNext = getClass(oDiv,'next')[0];
      var oMarkLeft = getClass(oDiv,'mark_left')[0];
      var oMarkRight = getClass(oDiv,'mark_right')[0];

      oBtnPrev.onmouseover = oMarkLeft.onmouseover = function () {
          startMove(oBtnPrev,'opacity',100);
      };
      oBtnPrev.onmouseout = oMarkLeft.onmouseout = function () {
          startMove(oBtnPrev,'opacity',0);
      };
      oBtnNext.onmouseover = oMarkRight.onmouseover = function () {
          startMove(oBtnNext,'opacity',100);
      };
      oBtnNext.onmouseout = oMarkRight.onmouseout = function () {
          startMove(oBtnNext,'opacity',0);
      }

      //大图切换
      var oDivSmall = getClass(oDiv,'small_pic')[0];
      var oUlSmall = oDivSmall.getElementsByTagName('ul')[0];
      var aLiSmall = oDivSmall.getElementsByTagName('li');

      var oUlBig = getClass(oDiv,'big_pic')[0];
      var aLiBig = oUlBig.getElementsByTagName('li');

      var nowZIndex =2;//记录层级
      var now = 0;//记录当前是第几张图片

      oUlSmall.style.width = aLiSmall[0].offsetWidth*aLiSmall.length+'px';

      for(var i =0;i<aLiSmall.length;i++){
          aLiSmall[i].index = i;//知道自己点击的是第几个小图
          aLiSmall[i].onclick = function () {

              if(now == this.index) return;
              now = this.index;
              tab();
          };


          //小图的onmouseover和onmouseout事件
          aLiSmall[i].onmouseover = function () {
              startMove(this,'opacity',100);//这边是this而不是aLiSmall[i]
          };
          aLiSmall[i].onmouseout = function () {

              if(this.index != now){
                  startMove(this,'opacity',60);//如果用this.index == now就要注意不等于的情况
              }

          }

      }
      function tab() {
          aLiBig[now].style.zIndex = nowZIndex++;//改变大图的层级z-index

          for (var i=0;i<aLiSmall.length;i++){
              startMove(aLiSmall[i],'opacity',60);//当点击的时候，首先将所有的li都变成半透明
          }
          startMove(aLiSmall[now],'opacity',100);//将自己变成不透明

          aLiBig[now].style.height = 0;
          startMove(aLiBig[now],'height',320);//先将当前的div高度清零，再让它从0开始慢慢增加

          //移动
          if(now==0){
              startMove(oUlSmall,'left',0);
          }
          else if(now == aLiSmall.length-1){
              startMove(oUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);
          }
          else{
              startMove(oUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth);
          }

      }

      //上一张下一张
      oBtnPrev.onclick = function () {
          now--;
          if(now == -1){
              now=aLiSmall.length-1;
          }
          tab();
      };
      oBtnNext.onclick = function () {
          now++;
          if(now == aLiSmall.length){
              now = 0;
          }
          tab();
      };

      var timer = setInterval(oBtnNext.onclick,2000);
      oDiv.onmouseover = function () {
          clearInterval(timer);
      };
      oDiv.onmouseout = function () {
          timer = setInterval(oBtnNext.onclick,2000);
      }
  </script>
</body>
</html>